<template>
  <div class="svg">
    <h1>我是测试代码</h1>
    <el-icon-share style="width: 1em; height: 1em; color: #409eff" />
    <el-icon-add-location style="width: 1em; height: 1em; color: #499eff" />
    <el-icon-alarm-clock style="width: 1em; height: 1em; color: #40990eff" />
    <el-button type="success">
      <el-icon-edit style="width: 1em; height: 1em; color: #409eff" />
      保存
    </el-button>
    <el-button>Default</el-button>
    <el-button type="primary" size="default" @click="myClick" :icon="Check">
      Primary
    </el-button>
    <el-button type="success" :icon="Plus">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
    <!-- svg图标的外层容器，内部需要与use标签结合使用 -->
    <svg width="24" height="24">
      <use href="#icon-mysvg"></use>
    </svg>
    <h1>测试axios请求封装</h1>
  </div>
</template>

<script setup lang="ts">
import { Plus, Check } from '@element-plus/icons-vue'
// import request from '@/utils/request'
import { onMounted } from 'vue'
import { reqLogin } from '@/api/user'

const myClick = () => {
  console.log('Hello!')
}

onMounted(() => {
  reqLogin({ username: 'admin', password: '111111' })
  // request({
  //   url: '/user/login',
  //   method: 'post',
  //   data: {
  //     username: 'admin',
  //     password: '111111',
  //   },
  // }).then((res) => {
  //   console.log(res.data)
  // })
})
</script>

<style scoped lang="scss">
div {
  h1 {
    color: $h1-color;
  }
}

.svg {
  width: 100%;
  height: 300px;
  background-color: $color-gray-5;
}
</style>
